{% extends "base.html" %}

{% block title %}预约详情 - 管理员{% endblock %}

{% block extra_css %}
<style>
    .admin-detail-header {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
        color: white;
        padding: 2rem 0;
        border-radius: 0 0 1rem 1rem;
        margin-bottom: 2rem;
    }

    .detail-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .card-header-custom {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        padding: 1.5rem;
        border-bottom: 1px solid #e9ecef;
    }

    .status-badge {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 600;
    }

    .status-pending {
        background: linear-gradient(135deg, #fff3cd, #ffeaa7);
        color: #856404;
    }

    .status-confirmed {
        background: linear-gradient(135deg, #d1ecf1, #bee5eb);
        color: #0c5460;
    }

    .status-completed {
        background: linear-gradient(135deg, #d4edda, #c3e6cb);
        color: #155724;
    }

    .status-cancelled {
        background: linear-gradient(135deg, #f8d7da, #f5c2c7);
        color: #721c24;
    }

    .status-no_show {
        background: linear-gradient(135deg, #e2e3e5, #d6d8db);
        color: #383d41;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .info-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 0.5rem;
        border-left: 4px solid #007bff;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .info-content {
        flex: 1;
    }

    .info-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    .info-value {
        font-weight: 600;
        color: #2c3e50;
        font-size: 1rem;
    }

    .user-profile {
        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .user-avatar {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        margin-right: 1.5rem;
    }

    .user-info {
        flex: 1;
    }

    .user-name {
        font-size: 1.5rem;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .user-meta {
        color: #6c757d;
        margin-bottom: 0.5rem;
    }

    .user-stats {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    .user-stat {
        text-align: center;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 0.375rem;
        min-width: 80px;
    }

    .stat-number {
        display: block;
        font-size: 1.25rem;
        font-weight: bold;
        color: #2c3e50;
    }

    .stat-label {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .timeline {
        position: relative;
        padding: 1.5rem;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 2rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #007bff, #0056b3);
    }

    .timeline-item {
        position: relative;
        padding: 1rem 0;
        padding-left: 3rem;
        margin-bottom: 1rem;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: 1.5rem;
        top: 1.5rem;
        width: 12px;
        height: 12px;
        background: #007bff;
        border-radius: 50%;
        border: 3px solid white;
        box-shadow: 0 0 0 3px #007bff;
    }

    .timeline-item.admin-action::before {
        background: #dc3545;
        box-shadow: 0 0 0 3px #dc3545;
    }

    .timeline-content {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .timeline-time {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }

    .timeline-title {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .timeline-desc {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .admin-actions {
        background: #f8f9fa;
        padding: 1.5rem;
        border-top: 1px solid #e9ecef;
    }

    .action-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .related-reservations {
        max-height: 400px;
        overflow-y: auto;
    }

    .related-item {
        background: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        border-left: 4px solid #28a745;
    }


    .related-item.same-day {
        border-left-color: #ffc107;
    }

    .override-warning {
        background: linear-gradient(135deg, #fff3cd, #ffeaa7);
        border-left: 4px solid #ffc107;
        border-radius: 0 0.75rem 0.75rem 0;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    @media (max-width: 768px) {
        .admin-detail-header {
            padding: 1rem 0;
        }

        .info-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .user-profile {
            flex-direction: column;
            text-align: center;
        }

        .user-avatar {
            margin-right: 0;
            margin-bottom: 1rem;
        }

        .user-stats {
            justify-content: center;
        }

        .action-grid {
            grid-template-columns: 1fr;
        }

        .timeline {
            padding: 1rem;
        }

        .timeline-item {
            padding-left: 2.5rem;
        }

        .timeline::before {
            left: 1.5rem;
        }

        .timeline-item::before {
            left: 1rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="admin-detail-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="mb-0">
                    <i class="fas fa-calendar-check me-2"></i>预约详情
                </h1>
                <p class="mb-0 mt-2 opacity-75">预约编号：#{{ reservation.id }} | 管理员视图</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ url_for('admin_reservations.list_reservations') }}" class="btn btn-light">
                    <i class="fas fa-arrow-left me-1"></i>返回列表
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <!-- 预约基本信息 -->
            <div class="detail-card">
                <div class="card-header-custom">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h3 class="mb-1">预约基本信息</h3>
                            <p class="mb-0 text-muted">
                                创建时间：{{ reservation.created_at.strftime('%Y-%m-%d %H:%M') }}
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <span class="status-badge status-{{ reservation.status }}">
                                {{ reservation.status_text }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">预约日期</div>
                            <div class="info-value">{{ reservation.reservation_date.strftime('%Y年%m月%d日 %A') }}</div>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">上课时间</div>
                            <div class="info-value">
                                {{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }}
                                <small class="text-muted d-block">({{ reservation.duration_minutes }}分钟)</small>
                            </div>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-table-tennis"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">球台信息</div>
                            <div class="info-value">
                                {{ reservation.table.name }}
                                <small class="text-muted d-block">{{ reservation.table.campus.name }}</small>
                            </div>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">上课地点</div>
                            <div class="info-value">{{ reservation.table.campus.address }}</div>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">课程费用</div>
                            <div class="info-value">
                                {% if reservation.price %}
                                    ¥{{ reservation.price }}
                                {% else %}
                                    <span class="text-muted">未设置</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-hashtag"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">预约编号</div>
                            <div class="info-value">#{{ reservation.id }}</div>
                        </div>
                    </div>
                </div>

                {% if reservation.notes %}
                <div style="padding: 0 1.5rem 1.5rem;">
                    <div class="alert alert-info">
                        <h6><i class="fas fa-sticky-note me-2"></i>预约备注</h6>
                        <p class="mb-0">{{ reservation.notes }}</p>
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- 学员信息 -->
            <div class="detail-card">
                <div class="card-header-custom">
                    <h3 class="mb-0">学员信息</h3>
                </div>

                <div style="padding: 1.5rem;">
                    <div class="user-profile">
                        <div class="d-flex align-items-center">
                            <div class="user-avatar">{{ reservation.student.name[0] }}</div>
                            <div class="user-info">
                                <div class="user-name">{{ reservation.student.name }}</div>
                                <div class="user-meta">
                                    <i class="fas fa-phone me-1"></i>{{ reservation.student.phone }}
                                    {% if reservation.student.email %}
                                    | <i class="fas fa-envelope me-1"></i>{{ reservation.student.email }}
                                    {% endif %}
                                </div>
                                {% if reservation.student.level %}
                                <div class="user-meta">
                                    <i class="fas fa-star me-1"></i>技术水平：{{ reservation.student.level_text }}
                                </div>
                                {% endif %}
                                <div class="user-stats">
                                    <div class="user-stat">
                                        <span class="stat-number">{{ student_stats.total_reservations }}</span>
                                        <span class="stat-label">总预约</span>
                                    </div>
                                    <div class="user-stat">
                                        <span class="stat-number">{{ student_stats.completed_reservations }}</span>
                                        <span class="stat-label">已完成</span>
                                    </div>
                                    <div class="user-stat">
                                        <span class="stat-number">{{ student_stats.completion_rate|round(1) }}%</span>
                                        <span class="stat-label">完成率</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <a href="{{ url_for('students.detail', id=reservation.student.id) }}" class="btn btn-outline-primary">
                                    <i class="fas fa-user me-1"></i>查看档案
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 教练信息 -->
            <div class="detail-card">
                <div class="card-header-custom">
                    <h3 class="mb-0">教练信息</h3>
                </div>

                <div style="padding: 1.5rem;">
                    <div class="user-profile" style="background: linear-gradient(135deg, #e8f5e8, #c8e6c9);">
                        <div class="d-flex align-items-center">
                            <div class="user-avatar" style="background: linear-gradient(135deg, #28a745, #20c997);">
                                {{ reservation.coach.name[0] }}
                            </div>
                            <div class="user-info">
                                <div class="user-name">{{ reservation.coach.name }}</div>
                                <div class="user-meta">
                                    <i class="fas fa-phone me-1"></i>{{ reservation.coach.phone }}
                                    {% if reservation.coach.email %}
                                    | <i class="fas fa-envelope me-1"></i>{{ reservation.coach.email }}
                                    {% endif %}
                                </div>
                                {% if reservation.coach.specialties %}
                                <div class="user-meta">
                                    <i class="fas fa-award me-1"></i>专长：{{ reservation.coach.specialties }}
                                </div>
                                {% endif %}
                                <div class="user-stats">
                                    <div class="user-stat">
                                        <span class="stat-number">{{ coach_stats.total_reservations }}</span>
                                        <span class="stat-label">总课程</span>
                                    </div>
                                    <div class="user-stat">
                                        <span class="stat-number">{{ coach_stats.completed_reservations }}</span>
                                        <span class="stat-label">已完成</span>
                                    </div>
                                    <div class="user-stat">
                                        <span class="stat-number">{{ coach_stats.completion_rate|round(1) }}%</span>
                                        <span class="stat-label">完成率</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <a href="{{ url_for('coaches.detail', id=reservation.coach.id) }}" class="btn btn-outline-success">
                                    <i class="fas fa-chalkboard-teacher me-1"></i>查看档案
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- 管理员操作 -->
            <div class="detail-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-tools me-2"></i>管理员操作
                    </h5>
                </div>

                <div class="admin-actions">
                    {% if reservation.status == 'pending' %}
                    <div class="override-warning">
                        <h6><i class="fas fa-exclamation-triangle me-2"></i>强制操作警告</h6>
                        <p class="mb-0">以下操作将绕过正常流程，请谨慎使用</p>
                    </div>
                    {% endif %}

                    <div class="action-grid">
                        {% if reservation.status == 'pending' %}
                        <button type="button" class="btn btn-success" onclick="forceConfirm()">
                            <i class="fas fa-check me-2"></i>强制确认
                        </button>
                        {% endif %}

                        {% if reservation.status not in ['cancelled', 'completed'] %}
                        <button type="button" class="btn btn-danger" onclick="forceCancel()">
                            <i class="fas fa-ban me-2"></i>强制取消
                        </button>
                        {% endif %}

                        <button type="button" class="btn btn-warning" onclick="editReservation()">
                            <i class="fas fa-edit me-2"></i>编辑预约
                        </button>

                    </div>

                    <hr>
                </div>
            </div>

            <!-- 相关预约 -->
            {% if related_reservations %}
            <div class="detail-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-link me-2"></i>相关预约
                    </h5>
                </div>

                <div style="padding: 1.5rem;">
                    <div class="related-reservations">
                        {% for related in related_reservations %}
                        <div class="related-item {% if related.reservation_date == reservation.reservation_date %}same-day{% endif %}">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <strong>#{{ related.id }}</strong>
                                    <span class="badge bg-{{ related.status_color }} ms-2">{{ related.status_text }}</span>
                                </div>
                                <small class="text-muted">{{ related.reservation_date.strftime('%m/%d') }}</small>
                            </div>
                            <div class="mt-2">
                                <div class="small">
                                    {% if related.student_id == reservation.student_id %}
                                    <i class="fas fa-user me-1"></i>同一学员
                                    {% endif %}
                                    {% if related.coach_id == reservation.coach_id %}
                                    <i class="fas fa-chalkboard-teacher me-1"></i>同一教练
                                    {% endif %}
                                </div>
                                <div class="small text-muted">
                                    {{ related.start_time.strftime('%H:%M') }}-{{ related.end_time.strftime('%H:%M') }} |
                                    {{ related.table.name }}
                                </div>
                            </div>
                            <div class="mt-2">
                                <a href="{{ url_for('admin_reservations.detail', reservation_id=related.id) }}" class="btn btn-outline-primary btn-sm">
                                    查看详情
                                </a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 操作历史 -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="detail-card">
                <div class="card-header-custom">
                    <h3 class="mb-0">操作历史</h3>
                </div>

                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-content">
                            <div class="timeline-time">{{ reservation.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
                            <div class="timeline-title">学员提交预约申请</div>
                            <div class="timeline-desc">{{ reservation.student.name }} 申请预约课程</div>
                        </div>
                    </div>



                    {% if reservation.cancelled_at %}
                    <div class="timeline-item {% if reservation.cancelled_by and reservation.cancelled_by not in [reservation.coach_id, reservation.student_id] %}admin-action{% endif %}">
                        <div class="timeline-content">
                            <div class="timeline-time">{{ reservation.cancelled_at.strftime('%Y-%m-%d %H:%M') }}</div>
                            <div class="timeline-title">
                                {% if reservation.cancelled_by == reservation.coach_id %}
                                教练取消预约
                                {% elif reservation.cancelled_by == reservation.student_id %}
                                学员取消预约
                                {% else %}
                                管理员强制取消预约
                                {% endif %}
                            </div>
                            <div class="timeline-desc">
                                {% if reservation.cancel_reason %}
                                    取消原因：{{ reservation.cancel_reason }}
                                {% else %}
                                    预约已取消
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 强制取消确认模态框 -->
<div class="modal fade" id="forceCancelModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">管理员强制取消预约</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>警告：</strong>这是管理员强制操作，将直接取消预约并通知相关用户。
                </div>
                <div class="mb-3">
                    <label class="form-label">取消原因（必填）</label>
                    <textarea class="form-control" id="forceCancelReason" rows="3"
                              placeholder="请输入取消原因，将通知学员和教练..."></textarea>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="notifyUsers" checked>
                    <label class="form-check-label" for="notifyUsers">
                        发送取消通知给学员和教练
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="confirmForceCancel()">确认取消</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 强制确认预约
function forceConfirm() {
    if (!confirm('确定要强制确认这个预约吗？此操作将绕过教练确认流程。')) return;

    $.post('{{ url_for("admin_reservations.api_force_confirm", reservation_id=reservation.id) }}', function(response) {
        if (response.success) {
            showAlert('success', response.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('error', response.message);
        }
    }).fail(function() {
        showAlert('error', '网络错误，请重试');
    });
}

// 强制取消预约
function forceCancel() {
    $('#forceCancelModal').modal('show');
}

function confirmForceCancel() {
    const reason = $('#forceCancelReason').val().trim();
    if (!reason) {
        showAlert('error', '请输入取消原因');
        return;
    }

    const notifyUsers = $('#notifyUsers').is(':checked');

    $.ajax({
        url: '{{ url_for("admin_reservations.api_force_cancel", reservation_id=reservation.id) }}',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            reason: reason,
            notify_users: notifyUsers
        }),
        success: function(response) {
            if (response.success) {
                showAlert('success', response.message);
                $('#forceCancelModal').modal('hide');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('error', response.message);
            }
        },
        error: function() {
            showAlert('error', '网络错误，请重试');
        }
    });
}

// 编辑预约
function editReservation() {
    window.location.href = '{{ url_for("admin_reservations.edit", reservation_id=reservation.id) }}';
}


// 显示提示信息
function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' :
                      type === 'info' ? 'alert-info' : 'alert-danger';
    const icon = type === 'success' ? 'check-circle' :
                 type === 'info' ? 'info-circle' : 'exclamation-triangle';

    const alert = $(`
        <div class="alert ${alertClass} alert-dismissible fade show position-fixed"
             style="top: 20px; right: 20px; z-index: 9999;">
            <i class="fas fa-${icon} me-2"></i>${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `);

    $('body').append(alert);

    setTimeout(function() {
        alert.alert('close');
    }, 3000);
}
</script>
{% endblock %}